<template>
  <div>
    <el-radio-group v-model="showThisActive" size="medium">
      <el-radio-button :label="0">可接入算法</el-radio-button>
      <!-- <el-radio-button :label="2">评估指标体系</el-radio-button> -->
      <el-radio-button :label="1">奖励函数</el-radio-button>
    </el-radio-group>
    <div v-if="showThisActive == 0">
      <ul class="alike-lis">
        <li v-for="(item, index) in dataList" :key="index" @click="goCode(item)">
          <div class="alike-lis-box">
            <v-image class="alike-lis-pic" :src="item.avatar" alt="" />
            <div class="alike-lis-word">
              <p class="alike-lis-title">{{ item.name }}</p>
              <p class="alike-lis-hint">{{ item.desc }}</p>
              <el-popover placement="bottom-end" width="80" trigger="hover">
                <a href="javascript:;" class="alike-lis-handle" @click="del(item.id)">删除</a>
                <a href="javascript:;" class="handle-btn" slot="reference">.<br />.<br />.</a>
              </el-popover>
            </div>
            <div class="alike-lis-user">
              <img src="@/assets/img/test-user-man.png" alt="">
              <span class="user-name">{{ item.create_user.userName }}</span>
              <span class="date">{{ item.create_time }}</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="pagination-box" v-if="Pagedata.total > Pagedata.size">
        <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
          :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
          :total="Pagedata.total">
        </el-pagination>
      </div>
    </div>
    <!-- <div v-if="showThisActive == 2">
      <assess-child />
    </div> -->
    <div class="rate-box" v-if="showThisActive == 1">
      <div class="rate-item">
        <p class="tate-title">对空任务完成率</p>
        <el-input type="text" v-model="rate1" class="tate-input" />
        <v-chart :option="optionData" class="chart-item" />
      </div>
      <div class="rate-item">
        <p class="tate-title">对海任务完成率</p>
        <el-input type="text" v-model="rate2" class="tate-input" />
        <v-chart :option="optionData" class="chart-item" />
      </div>
      <div class="rate-item">
        <p class="tate-title">对陆任务完成率</p>
        <el-input type="text" v-model="rate3" class="tate-input" />
        <v-chart :option="optionData" class="chart-item" />
      </div>
      <div class="rate-item">
        <p class="tate-title">对潜任务完成率</p>
        <el-input type="text" v-model="rate4" class="tate-input" />
        <v-chart :option="optionData" class="chart-item" />
      </div>
    </div>
  </div>
</template>

<script>
import { getMarketAlgorithms } from '@/api/marketAlgorithm'
// import assessChild from './assess-child.vue'
export default {
  data() {
    return {
      showThisActive: 1,
      rate1: '',
      rate2: '',
      rate3: '',
      rate4: '',
      optionData: {},
      Pagedata: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
        resourceType: 0,// 数据集
        name: "", // 名称搜索
        order: "recommend", // 排序recommend、createTime、likeCount
      },
      dataList: [],
      testPic: require('@/assets/img/test-lis-pic.png'),
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  props: ['version'],
  async mounted() {
    this.getData();
    setTimeout(() => {
      this.optionData = { "metric": { "container": "webide" }, "values": [[1668084155, "0.2145853042602539"], [1668084455, "0.21463489532470703"], [1668084755, "0.2145528793334961"], [1668085055, "0.21467065811157227"], [1668085355, "0.2146472930908203"], [1668085655, "0.21451568603515625"], [1668085955, "0.21461963653564453"], [1668086255, "0.2146148681640625"], [1668086555, "0.21459531784057617"], [1668086855, "0.21452760696411133"], [1668087155, "0.21456670761108398"], [1668087455, "0.21468782424926758"], [1668087755, "0.21462440490722656"]], "color": ["rgb(255, 70, 131)", "rgb(255, 158, 68)", "rgb(255, 70, 131)"], "title": " " }
    }, 300)
  },
  components: {
    // assessChild
  },
  watch: {
    showThisActive() {
      setTimeout(() => {
        this.optionData = { "metric": { "container": "webide" }, "values": [[1668084155, "0.2145853042602539"], [1668084455, "0.21463489532470703"], [1668084755, "0.2145528793334961"], [1668085055, "0.21467065811157227"], [1668085355, "0.2146472930908203"], [1668085655, "0.21451568603515625"], [1668085955, "0.21461963653564453"], [1668086255, "0.2146148681640625"], [1668086555, "0.21459531784057617"], [1668086855, "0.21452760696411133"], [1668087155, "0.21456670761108398"], [1668087455, "0.21468782424926758"], [1668087755, "0.21462440490722656"]], "color": ["rgb(255, 70, 131)", "rgb(255, 158, 68)", "rgb(255, 70, 131)"], "title": " " }
      }, 300)
    }
  },
  methods: {
    async getData() {
      let res = await getMarketAlgorithms({ type: 2, ...this.Pagedata })
      if (res && res.data) {
        let ret = res.data
        this.dataList = ret.list
        this.Pagedata.total = ret.total
      }
    },
    handleCurrentChange(val) {
      this.Pagedata.current = val
      this.Pagedata.current = val
      this.getData()
    },
    goCode({ id }) {
      let query = {
        id: id,
        active: this.showThisActive
      }
      this.$router.push({
        path: '/algorithm/code',
        query
      })
    }
  }
}
</script>
<style lang="less" scoped>
.rate-box {
  overflow: hidden;
}

.rate-item {
  width: 49%;
  float: left;
}

.tate-title {
  float: left;
  padding: 60px 0 0 40px;
  line-height: 40px;
}

.tate-input {
  float: left;
  width: 120px;
  margin: 60px 0 0 20px;
}

.chart-item {
  clear: both;
  width: 100%;
  height: 400px;
}
</style>